<template>
  <div class="home">
    <main class="main">
      <!-- <aside class="swiper">轮播图</aside> -->
      <swiper
        css-mode
        navigation
        pagination
        :space-between="30"
        loop
        :modules="modules"
        :autoplay="{
          delay: 5000,
          disableOnInteraction: false,
        }"
        :style="{
          '--swiper-navigation-color': '#fff',
          '--swiper-pagination-color': '#fff',
        }"
        class="swiper"
      >
        <swiper-slide v-for="item in swiperList" :key="item.id">
          <img
            @click="toNoticeDetail(item.announcementId)"
            style="object-fit: cover; height: 400px; width: 100%"
            class="c-p"
            :src="item.imgUrl"
          />
        </swiper-slide>
      </swiper>
      <!-- 科技成果和技术需求 -->
      <result/>
      <!-- 园区动态 -->
      <dynamic/>
      <!-- 园区招商、宣传片、公告、政策文件、友情链接 -->
      <investment/>
    </main>

  </div>
</template>

<script setup lang="ts">
import { getAnnouncement, getAnnouncementList, getHomeBanner } from '@/api/park';
import { onMounted, ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
import { Navigation, Pagination, Autoplay } from 'swiper';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
// 引入图片
import demand from '@/assets/images/demand.png';
import solveDemand from '@/assets/images/solve-demand.png';
import achievement from '@/assets/images/achievement.png';
import findAchievement from '@/assets/images/find-achievement.png';
import createMeeting from '@/assets/images/create-meeting.png';
import result from './components/result.vue';
import dynamic from './components/dynamic.vue';
import investment from './components/investment.vue';

const modules = [Navigation, Pagination, Autoplay];

const commonServiceList = ref([
  { url: demand, name: '提出需求', routeName: 'publishNeed' },
  { url: solveDemand, name: '解决需求', routeName: 'needs' },
  { url: achievement, name: '发布成果', routeName: 'publishAchievement' },
  { url: findAchievement, name: '寻求成果', routeName: 'achievements' },
  { url: createMeeting, name: '创建会议', routeName: 'createMeeting' },
]);

const onClickItem = (routeName: string) => {
  router.push({
    name: routeName,
  });
};

// 公告相关
const activeIndex = ref('0');
let announcementType = ref<string>(activeIndex.value);
const handleSelect = (key: string) => {
  announcementType.value = key;
};
watch(announcementType, () => {
  getNoticeList();
});
const router = useRouter();
const route = useRoute();


function toNoticeDetail(id: string | number) {
  const { href } = router.resolve({
    name: 'noticeDetail',
    query: {
      id,
    },
  });
  window.open(href, '_blank');
}
// 获取公告列表
const noticeList = ref();
const total = ref(0);
const current = ref<number>(1);
function getNoticeList() {
  const query = {
    type: announcementType.value,
    current: current.value,
  };

  getAnnouncement(query).then((res: any) => {
    if (res.code === 200) {
      noticeList.value = res.data?.records;
      total.value = res.data?.total;
    }
  });
}
// 分页
function handleCurrentChange(val: number) {
  current.value = val;
  getNoticeList();
}

// 获取轮播图数据
const swiperList = ref<any[]>([]);
function getSwiperList() {
  getHomeBanner().then((res: any) => {
    if (res.code === 200) {
      swiperList.value = res.data.bannerItemList;
    }
  });
}

// 修改onMounted
onMounted(() => {
  // 只在当前路由是/home时执行
  console.log("首页")
    getNoticeList();
    getSwiperList();

});
</script>

<style scoped lang="scss">
.home {
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 100vh;

    $height: 400px;
    .swiper {
      width: 100%;
      height: $height;
      margin-bottom: 20px;
    }
    .notice {
      flex: 1;
      margin-left: 20px;
      border: 1px solid skyblue;
      height: $height;
      display: flex;
      flex-direction: column;
      .notice-list {
        flex: 1;
        width: 100%;
        padding-top: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        li {
          position: relative;
          padding: 0 5%;
          margin-bottom: 5px;
          display: flex;
          justify-content: space-between;
          &::before {
            content: '';
            position: absolute;
            width: 5px;
            height: 5px;
            background-color: #338ccb;
            top: 50%;
            left: 2.5%;
            transform: translate(-50%, -50%);
          }
          .title {
            max-width: 85%;
            &:hover {
              cursor: pointer;
              color: #338ccb;
            }
          }
        }
      }
    }
  }
  .footer {
    padding: 20px;
    &-title {
      position: relative;
      &::after {
        content: '';
        position: absolute;
        width: 4em;
        height: 8px;
        background: linear-gradient(0.25turn, #037ef8, #46a2ff, #72b3f3);
        left: 0;
        bottom: 5px;
        z-index: -1;
      }
    }
    &-list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      &-item {
        width: 20%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: transform 0.3s ease;
        &:hover {
          transform: scale(1.1);
        }
        &-img {
          width: 60%;
        }
        &-title {
          font-size: 24px;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
